<template>
  <div class="header">
    <!-- logo -->
    <div class="header-logo">
      <img
        class="header-logo__ico"
        src="../assets/img/header-logo.png"
      />
      <span class="header-logo__text">CMS平台</span>
    </div>
    <!-- logout -->
    <div class="header-logout">
      欢迎您，<span class="header-logout__user">{{userName}}</span>
      <i @click="logout" class="header-logout__exit iconfont iconfont-1"></i>
    </div>
  </div>
</template>

<script>
import { sessionStorage } from "@/util";
export default {
  name: "Header",
  data() {
    return {
      userName: sessionStorage.get("user").nick
    };
  },
  methods: {
    logout() {
      sessionStorage.clearAll();
      this.$router.push({
        path: "/login"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.header {
  height: 80px;
  background: #2c3147;

  &-logo {
    float: left;
    padding: 10px 20px;
    &__ico,
    &__text {
      float: left;
    }
    &__ico {
      height: 60px;
    }
    &__text {
      line-height: 60px;
      color: #bfbfbf;
      font-size: 26px;
    }
  }

  &-logout {
    float: right;
    line-height: 36px;
    font-size: 14px;
    padding: 22px 20px 22px 0;
    color: #888;
    &__user,
    &__exit {
      display: inline-block;
      cursor: pointer;
    }
    &__exit {
      padding: 0 10px;
      &:hover {
        color: #fff;
      }
    }
  }
}
</style>